<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user.id">
        <author-base-info :author="user" class="abi"
        @follow="follow(user)"></author-base-info>
        <div class="span"></div>
      </li>
    </ul>
    <loading-card class="loading-card" ref="loading" :nomore="nomore"></loading-card>
  </div>
</template>

<script>
import AuthorBaseInfo from '../pages/index/components/author/profile/AuthorBaseInfo.vue';
import LoadingCard from '@c/utils/LoadingCard2.vue';

  export default {
    components: {
      AuthorBaseInfo,
      LoadingCard
    },
    props: {
      users: {
        type: Array,
        default: () => []
      },
    },
    data() {
      return {
        nomore: false
      }
    },
    methods: {
      follow(user) {
        this.$post({
          name: 'follow',
          url: 'author/follow',
          data: {
            author_id: user.id
          }
        }).then(res => {
          if(res.data.success) {
            if(user.is_follow) {
              this.$alert("取消关注成功");
            } else {
              this.$alert("关注成功");
            }
            user.is_follow = !user.is_follow;
            this.$store.commit('fetchUserInfos');
          } else {
            if(user.id_follow) {
              this.$alert("取消关注失败");
            } else {
              this.$alert("关注失败");
            }
          }
        }).catch(error => {
          if(user.id_follow) {
            this.$alert("取消关注失败");
          } else {
            this.$alert("关注失败");
          }
        })
      }
    },
    mounted() {
      this.$scrollLoad({
        loadingComponent: this.$refs.loading.$el,
        callback: entries => {
          let entry = entries[0];
          if(entry.isIntersecting) {
            let bl = this.users.length;
            this.$emit('fetchUsers');
            setTimeout(() => {
              let al = this.users.length;
              if(al - bl < 10) {
                this.nomore = true;
              } else {
                this.nomore = false;
              }
            }, 1000);
          }
        }
      })
    }
  }
</script>

<style lang="less" scoped>
@w: var(--userListWidth);

ul {
  width: @w;

  li {
    width: @w;

    .abi {
      --authorBaseInfoWidth: @w;
      --authorBaseInfoHeight: calc(@w * 0.15);
    }

    .span {
      width: @w;
      margin: calc(@w * 0.03), 0;
      height: 1px;
      background-color: var(--light);
    }
  }
}

.loading-card {
  --loadingCardWidth: @w;
  --loadingCardHeight: 200px;
}

</style>